<template>
  <el-table
      :data="tableData"
      height="689px"
      border
      style="width: 100%"
      :header-cell-style="{background:'#ffd04b',color:'#606266'}">
    <el-table-column
        align="center"
        prop="id"
        label="编号">
    </el-table-column>
    <el-table-column
        align="center"
        prop="name"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        align="center"
        prop="phone"
        label="手机"
        width="180">
    </el-table-column>
    <el-table-column
        align="center"
        prop="room"
        label="包间编号">
    </el-table-column>
    <el-table-column
        align="center"
        prop="useTime"
        label="时长">
    </el-table-column>
    <el-table-column
        align="center"
        prop="area"
        label="区域">
    </el-table-column>
    <el-table-column
        align="center"
        prop="date"
        label="日期">
    </el-table-column>
    <el-table-column
        align="center"
        prop="time"
        label="时间">
    </el-table-column>
    <el-table-column
        align="center"
        prop="cost"
        label="包间费用">
    </el-table-column>
    <el-table-column
        align="center"
        label="操作"
        width="80px">
      <template slot-scope="scope">
        <el-button
            size="mini"
            type="danger"
            @click="orderDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from "axios";

export default {
  name: "drinks",
  // 向后台拿数据，利用axios获取后台url,将数据传回前端
  created() {
    axios.get('http://120.24.48.65:8282/order/allOrder').then(response=>{
      this.tableData=response.data
    })
  },
  methods:{
    orderDelete(row){
      let _this = this
      this.$confirm('是否确定要删除'+row.name+'?','删除数据',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(() => {

        axios.delete('http://120.24.48.65:8282/orderDelete/'+row.id).then(response=>{
          if (response.data){
            _this.$alert(row.name+'删除成功?','删除数据',{
              callback:action => {
                //跳转到/order
                location.reload()
              }
            });
          }
        })
      }).catch(() =>{

      })
    },
  },
  data() {
    return {
      tableData:''
    }
  }
}
</script>
<style scoped>
el-table{
  text-align: center;
}
</style>


